<template>
  <div>
    <input type="text" v-model="val" />
    <button @click="setObj">修改obj</button><br>
    <input type="number" v-model.number="one" />摄氏度<br />
    ----- <br />
    <input type="number" v-model.number="two" />华氏度
  </div>
</template>

<script>
export default {
  data() {
    return {
      one: 0,
      two: null,
      val: "",
      tit: "",
      obj: {
        one: 1111,
      },
    };
  },

  //计算属性多用于 多个变量 求出一个结果  多对一
  //监听器 常用于 监听一个变量 修改 多个变量    一对多
  methods: {
    setObj() {
      //   this.obj = {
      //     two: 22222,
      //   };
      this.obj["one"] = 2222;
      console.log(this.obj);
    },
  },
  watch: {
    //watch更多起到的是观察的作用 无缓存值的功能 数据发生改变时会自动触发 进而调用函数 可以在这定义异步方法 但是监听对象中默认的值 
    //默认情况下无法监听到 需要开启深度监听（deep）用完整写法
    one(){
        //根据 输入的摄氏度修改该华氏度
        this.two = 32 + this.one*1.8  
        
    },
    two(){
        this.one = (this.two-32)/1.8
    },

    // obj(a, b) {
    //   console.log("obj修改了");
    //   console.log(a, b);
    // },
    obj: {
      handler() {
        console.log("obj修改了");
      },
      //deep 为深度监听 可以监听引用数据类型内部的值是否修改
      deep: true, //简化写法默认deep为false
    },
    // val(n, o) {
    //n 修改后 的数据为n
    //o 修改前的数据为o
    //n o 更适合基本数据类型 在引用数据类型中不是很好用 在监听对象时这两个参数相同
    //计算属性中只能支持同步属性
    //第一个参数代表 更新之后的值
    //第二个参数代表 更新之后的值
    //这里可以下异步方法
    //   setTimeout(() => {
    //     console.log(n, o);
    //     console.log("val 被修改了");
    //   }, 3000);
    // },
    val: {
      //监听谁就写那个变量名 不用加 this
      handler(n, o) {
        // 必须叫handler
        console.log(n, o);
        console.log("val发生修改了");
      },
      immediate: true, // true时 页面初始化时 就先执行一次 而不是数据给更改以后再执行
    },
  },
};
</script>

<style>
</style>